/*
 * 新增视频
 * @Author: ljb 
 * @Date: 2017-11-27 15:23:58 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-01-30 10:28:43
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-video-create {
        min-height: 600px;
    }
    
</style>
<template>
<div class="v-admin-video-create">
    <Row type="flex" justify="start">
        <Col push="1">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">

                <Form-item label="视频类别" prop="video_type_id">
                   <Select v-model="formValidate.video_type_id" clearable filterable>
                       <Option v-for="( value , key ) in videoTypes" :value="key + ''" :key="key">{{ value }}</Option>
                    </Select>
                </Form-item>

                <Form-item label="视频名称" prop="name">
                    <Input type="text" v-model="formValidate.name" placeholder="请输入名称"></Input>
                </Form-item>

                <Form-item label="优先级" prop="sort">
                    <InputNumber :max="100" :min="1" v-model="formValidate.sort" placeholder="请输入视频优先级"></InputNumber>
                </Form-item>

                <Form-item label="封面图" prop="preview_img">
                    <Upload :before-upload="file=>fileChange(file,'preview_img','image_info')"
                            :on-remove="file=>fileChange(file,'preview_img','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                        <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
                        <!-- <div class="license-tip" slot="tip" v-else>图片规格为320 x 134的jpg、jpeg或png，大小不超1.5M</div> -->
                    </Upload>
                </Form-item>

                <Form-item label="视频路径" prop="url">
                    <!-- bos上传按钮组件 -->
                    <bos-upload  ref="bos_upload"
                                :bos-config="bosConfig"
                                @progress="changeProgress"
                                @setKey="setBosKey"
                                @post="dataPost"
                                @validate="isValidateVideo"></bos-upload>
                    <p>视频为mp4格式</p>
                </Form-item>

                <Form-item>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </Form-item>

            </Form>
        </Col>
    </Row>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapGetters , mapMutations } from 'vuex';

import bosUpload from 'src/views/component/bosupload';

import {
    validateImage
} from 'src/validate';    //引入校验文件

export default {
    name: 'video-create',

    props: ['videoTypes','bosConfig'],

    data() {	
        return {

            formValidate : {

                name : '',

                video_type_id : '',

                url : '',

                preview_img: '',

                sort: 1
            },                  //新建视频时的表单

            ruleValidate: {
                name: [
                    { required: true, message: '视频名称不能为空', trigger: 'blur,change' }
                ],
                video_type_id: [
                    { required: true, message: '视频类别不能为空', trigger: 'blur,change' },
                ],
                preview_img: [
                    { required: true, validator: validateImage, trigger: 'blur,change' },
                ],
                sort: [
                    { required: true, type: 'number',  message: '优先级不能为空', trigger: 'blur,change' },
                ],
            },

            // 上传的图片信息
            image_info : {
                name: '',   
                url: ''         //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            },

            validate_video : false,     //视频格式的校验
        }
    },
    components: {
        bosUpload
    },
    methods: {

        ...mapMutations('spinShow',[
            'showSpin',
            'close'
        ]),

        /**
         * bos-upload组件文件校验通过
         * @param  {string} value {组件返回的信息}
         * @return {Boolean} {true代表通过，false代表不通过}
         */
        isValidateVideo(value) {

            this.validate_video = value;

        },

        /**
         * 设置bos_key
         * @param  {string} value {需要设置给bos_key的值}
         * @return {undefined} {description}
         */
        setBosKey(value){

            this.formValidate.url = value;

        },

        /**
         * bos上传进度显示
         * @param  {string} value {需要设置给bos_key的值}
         * @return {undefined} {description}
         */
        changeProgress(progress){

            const load_info = '上传中，进度：' + progress + '%';

            this.showSpin(load_info);

        },

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if ( valid && this.validate_video ) {

                    this.$refs.bos_upload.bos_uploader.start();

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

            this.formValidate.preview_img = '';

            this.image_info.name = '';

        },

        /**
         * post数据
         * @return {undefined}
         */
        dataPost(){

            const form_data = this.formDataCreate();

            this.$emit('post',form_data);

        },

        /**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
        formDataCreate(){

            const new_object = {

                name : this.formValidate.name,

                video_type_id : this.formValidate.video_type_id,

                url : this.formValidate.url,

                description: this.formValidate.description,

                preview_img: this.formValidate.preview_img,

                detail: this.formValidate.detail,

                sort: this.formValidate.sort
            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
    }
}
</script>